Introduction to Components in React

In this Article, we will understand about what are React Components, how do we create Components and how do we render Components.

Components are the building blocks of any React app. Components allow us split the UI into independent and reusable pieces.

A component is combination of

1. Template using HTML

2. User Interactivity using JS

3. Applying Styles using CSS

A typical React app will have many components like header component, navbar component, footer component and content component. Conceptually a component is a JavaScript class or function that accepts inputs which are properties(props) and returns a React element that describes how a section of the User Interface should appear. A component can be created as Function Component or Class Component.

Open the demo-project using VS code and run this Project using Nodejs Command Prompt. Lets say we want to Create a Javascript function which takes an Object and returns a container which displays Employee Information.

function Employee(data) {
  return <div><p>Name : {data.name}</p>
    <p>Salary : {data.salary}</p></div>;
}

The above function is an example of Component and we can Call this by writing

const element = <Employee name="Sara" salary="12345" />;

and this element can be rendered using

ReactDOM.render(element,  document.getElementById('root'));

In our Previous sessions, we have created React elements that represent DOM tags. However, elements can also represent user-defined components. When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.

A function can also be created using Arrow function. Lets modify the same code using Arrow function.

const Employee=(data)=> {
  return <div><p>Name : {data.name}</p>
    <p>Salary : {data.salary}</p></div>;
}

Note: Always start component names with a capital letter. React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Employee /> represents a component. Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail.

Now lets Say along with the Employee Details, we would like to Display Employee Department information as well. One way is to write the Code to display department information in the Employee Component. It is not a good Practice to keep everything in one component. To promote Code reusability, we will split them into different components. So lets create a New Department Component which will display Department Information and this Component can be used by any other component.

const Employee=(data)=> {
  return (<div><p>Name : {data.name}</p>
    <p>Salary : {data.salary}</p>
  <Department dept={data.dept} head={data.head}/>
  </div>);
}

const Department=(deptInfo)=>{
  return <div><p>Dept Name is : <b>{deptInfo.dept}</b></p>
    <p>Dept Head is : <b>{deptInfo.head}</b></p>
    </div>;
}

const element = <Employee name="Sara" salary="12345" dept="Test" head="Head" />;

ReactDOM.render(element,  document.getElementById('root'));

The components we have created until now are called as Function Components. We will understand about Class Components in our Next Session.

Introduction to Components in React

For Video Reference